import React, { Component } from 'react';
import router from 'umi/router';
import styles from './index.less';
import { fetchApi } from '@/utils/utils';

class videoList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      title: '',
      videoList: [],
    };
  }
  componentDidMount() {
    this.getVideoList();
  }
  getVideoList = async () => {
    let phone = localStorage.getItem('phone');
    let res = await fetchApi(`web/history?phone=${phone}`);
    console.log(res);
    if (res.status === 0) {
      this.setState({
        videoList: res.data.list,
      });
    }
  };
  goVideoDetail = i => {
    console.log(i);
    console.log(i);
    router.push({
      pathname: '/videoDetail',
      query: {
        id: i.videoId,
      },
    });
  };
  render() {
    const { title, videoList } = this.state;
    return (
      <div className="video-list-wrap">
        <div className="video-list">
          {videoList && videoList.length > 0
            ? videoList.map(i => {
                return (
                  <div key={i.id} className="video-list-item" onClick={e => this.goVideoDetail(i)}>
                    <div className="item-img">
                      <img src={i.imgUrl} />
                      <div className="item-img-type">{title}</div>
                    </div>
                    <div className="item-content">
                      <h3>{i.title}</h3>
                    </div>
                  </div>
                );
              })
            : '暂时还没有视频哦'}
        </div>
      </div>
    );
  }
}

export default videoList;
